<template>
  <div class="nav1">
    <el-row type="flex" justify="center">
      <el-col :lg="20">
        <el-row class="nav">
          <el-col
            :xs="12"
            :sm="8"
            :md="4"
            :lg="2"
            :xl="2"
            v-for="(item, index) in nav"
            :key="index"
            class="col"
          >
            <div class="nav-icon" :class="index === nav.length - 1 ? 'bor' : ''">
              <nuxt-link
                :to="{
                  path: item.url,
                }"
                class="overtext"
                :class="pitch === index ? 'nav-icon1' : ''"
                ><i :class="item.icon" class="icn"></i>{{ item.name }}</nuxt-link
              >
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "HomePageNav",

  inject: ["pitch"],
  data() {
    return {
      nav: [
        {
          name: "全部",
          icon: "el-icon-menu",
          url: "/",
        },
        {
          name: "热搜榜",
          icon: "el-icon-search",
          url: "/rs",
        },
        {
          name: "热议榜",
          icon: "el-icon-chat-dot-round",
          url: "/ry",
        },
        {
          name: "影视榜",
          icon: "el-icon-caret-right",
          url: "/ys",
        },
        {
          name: "音乐榜",
          icon: "el-icon-mic",
          url: "/yy",
        },
        {
          name: "摄影榜",
          icon: "el-icon-camera",
          url: "/sy",
        },
        {
          name: "设计榜",
          icon: "el-icon-edit",
          url: "/sj",
        },
        {
          name: "财富榜",
          icon: "el-icon-coin",
          url: "/cf",
        },
        {
          name: "产品榜",
          icon: "el-icon-medal",
          url: "/cp",
        },
        {
          name: "游戏榜",
          icon: "el-icon-s-platform",
          url: "/yx",
        },
        {
          name: "大数据",
          icon: "el-icon-bangzhu",
          url: "/dsj",
        },
        {
          name: "其他榜",
          icon: "el-icon-s-promotion",
          url: "/qt",
        },
      ],
    };
  },
};
</script>

<style scoped lang="less">
.nav {
  height: 50px;
  font-size: 16px;
}
.nav1 {
  margin: 10px 0 0 0;
  width: 100%;
}
.col {
  height: 100%;
  .bor {
    border: none;
  }
}
.nav-icon {
  height: 100%;
  border-right: 0.5px dotted gray;
  line-height: 50px;
  text-align: center;

  &:hover {
    background: #fff;
  }
  a {
    display: block;

    text-align: center;
  }
}

.icn {
  margin: 0 2px 0 0;
}
.nav-icon1 {
  background: #fff;
  color: red;
}
</style>
